<template>
  <div>
    <div class="cm-type">
      <div
        ref="comment"
        v-for="item in starLevel"
        :key="item.id"
        @click="handerComment(item.id, $event)"
      >
        {{ item.name }}({{ item.count }})
      </div>
    </div>
    <div>
    <Comment />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.cm-type {
  display: flex;
  border-bottom: 1px dashed rgb(228, 227, 227);
  padding: 10px 20px;
  div {
    width: 100px;
    line-height: 38px;
    text-align: center;
    color: #666;
    cursor: default;
    font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB,
      "\u5b8b\u4f53", sans-serif;
  }
  div:hover {
    color: #e4393c;
  }
}
</style>

<script>
import Comment from './comment.vue'
export default {
  components: {
    Comment
  },
  data () {
    return {
      starLevel: [
        {
          id: 1,
          name: '总评价',
          count: 5000
        },
        {
          id: 2,
          name: '好评',
          count: 4000
        },
        {
          id: 3,
          name: '中评',
          count: 800
        },
        {
          id: 4,
          name: '差评',
          count: 200
        }
      ],
      comments: []
    }
  },
  props: {
    shopid: {
      require: true
    }
  },
  methods: {
    // 评论
    handerComment (commentType, event) {
      this.$refs.comment.forEach((item) => {
        item.style.color = '#666'
      })

      event.target.style.color = '#e4393c'
      console.log(commentType)
    }
  }
}
</script>

<style>
</style>
